import React, { useEffect } from 'react';
import './register.less';
import { Button, Checkbox, Form, Input, message } from 'antd';
//离子背景
import ParticlesBg from 'particles-bg';
import { history,Dispatch,connect , IndexModelState, ConnectProps, Loading } from 'umi';
import axios from 'axios';

type Props = {
  dispatch: Dispatch
};

const Index = (props: Props) => {
  console.log(props);

 const {dispatch}= props
  const onFinish = (values: any) => {
    console.log(values);

    dispatch({
      type:"register/getRegister",
      payload:{
        name:values.name,
        password:values.password,
        confirm:values.confirm
      }
    })

  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login">
      <ParticlesBg type="polygon" bg={true}></ParticlesBg>
      <div className="loginbox">
        <div className="leftbox">
          <img src={require('./1.png')} alt="" />
        </div>
        <div className="rightbox">
          <div className="loginmain">
            <h2>访客注册</h2>
            <Form
              name="register"
              onFinish={onFinish}
              initialValues={{
                residence: ['zhejiang', 'hangzhou', 'xihu'],
                prefix: '86',
              }}
              scrollToFirstError
            >
              <Form.Item
                style={{ margin: '10px 0' }}
                label="账户"
                name="name"
                rules={[
                  { required: true, message: 'Please input your name!' },
                ]}
              >
                <Input
                  style={{ width: '100%', height: '40px' }}
                  placeholder="请输入用户名"
                />
              </Form.Item>
              <Form.Item
                name="password"
                label="密码"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
                hasFeedback
              >
                <Input.Password placeholder="请输入密码" />
              </Form.Item>
              <Form.Item
                name="confirm"
                label="确认"
                dependencies={['password']}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: 'Please confirm your password!',
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue('password') === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('与上次输入密码不一致'));
                    },
                  }),
                ]}
              >
                <Input.Password placeholder="请再次输入密码" />
              </Form.Item>
              <Form.Item>
                <Button
                  style={{ width: '100%', height: '40px' }}
                  type="primary"
                  htmlType="submit"
                >
                  注册
                </Button>
              </Form.Item>
              Or{' '}
              <span
                onClick={() => {
                  history.push('/login');
                }}
              >
                去登录
              </span>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect(
  ({ index, loading }: { index: IndexModelState; loading: Loading }) => ({
    index,
    loading: loading.models.index,
  }),
)(Index);
